<template>
	<view>
		<image class="banner-image" src="../../static/icon/home/background.png" mode="aspectFill" :draggable="false" />
		<view  class="uni-padding-wrap uni-common-mt" style="margin-top: -70px;z-index: 10;position:relative;">
			<view class="example-body">
				<uni-grid :column="3" :showBorder="false"  :square="false" :highlight="true" @change="change">
					<template v-for="(item,i) in gridList">
						<uni-grid-item :index="i" :key="i" >
							<view class="grid-item-box" style="background-color: #fff;">
								<image :src="'/static/icon/home/'+item.icon+'.png'" class="image" mode="aspectFill" />
								<text class="text">{{item.text}}</text>
							</view>
						</uni-grid-item>
					</template>
				</uni-grid>
			</view>	
		</view>	
	</view>
</template>

<script>
import { getList as getJobs } from '@/api/gdTask.js'
export default {
	 	
	data() {
		return {
			gridList: [],
		};
	},
	computed: {
	},
	//第一次加载
	onLoad(e) {
	 
	},
	//页面显示
	onShow() {
		this.gridList = []
		this.$http.get("/system/menu/getRouters").then(res => {
			res.data.forEach(item =>{
				if(item.path == "/mobile"){
					item.children.forEach(child =>{
						this.gridList.push({
							text:child.name,
							url:child.component,
							icon:child.path
						})
					})
				}
			})
			console.log(this.gridList)
		}, err => {
			 
		});
		getJobs({
				pageNum: 1,
				pageSize: 9999,
				status:0
			}).then(res => {
				if(res.total > 0){
					uni.setTabBarBadge({
					  index: 1,
					  text: res.total.toString()
					})
				}else{
					uni.hideTabBarRedDot({index:1})
				}
			})
	},
	//方法
	methods: {
		change(e) {
			let { index } = e.detail
			uni.navigateTo({
			 	url: this.gridList[index].url,
			 	animationType: 'fade-in'
			});
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
	 view {
	 	font-size: 14px;
	 	line-height: inherit;
	 }
	 .example-body {
	 	/* #ifndef APP-NVUE */
	 	display: flex;
	 	/* #endif */
	 	flex-direction: column;
	 	flex-wrap: wrap;
	 	justify-content: center;
		padding: 15px;
	 	font-size: 14px;
	 	background-color: #ffffff;
		border-radius: 40rpx;
	 }
	 
	 /* #ifdef APP-NVUE */
	 .warp {
	 	background-color: #fff;
	 }
	 /* #endif */
	 
	 .image {
	 	width: 110rpx;
	 	height: 110rpx;
	 }
	 
	 .text {
	 	text-align: center;
	 	font-size: 26rpx;
	 	margin-top: 10rpx;
	 }
	 
	.grid-item-box {
	 	flex: 1;
	 	/* #ifndef APP-NVUE */
	 	display: flex;
	 	/* #endif */
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	 	padding: 10px 0;
	 }
	 
	 .banner-image {
	 	width: 750rpx;
	 	height: 950rpx;
		z-index:0
	 }
	 
	 .swiper-box {
	 	height: 400rpx;
	 }
	 
	 .search-icons {
	 	padding: 16rpx;
	 }
	 
	 .search-container-bar {
	 	/* #ifndef APP-NVUE */
	 	display: flex;
	 	/* #endif */
	 	flex-direction: row;
	 	justify-content: center;
	 	align-items: center;
	 	position: fixed;
	 	left: 0;
	 	right: 0;
	 	z-index: 10;
	 	background-color: #fff;
	 }
	 
	 /* #ifndef APP-NVUE || VUE3*/
	 /deep/
	 /* #endif */
	 .uni-searchbar__box {
	 	border-width: 0;
	 }
	 
	 /* #ifndef APP-NVUE || VUE3 */
	 /deep/
	 /* #endif */
	 .uni-input-placeholder {
	 	font-size: 28rpx;
	 }
</style>
